<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>全选练习</title>
    <script type="text/javascript">
        window.onload=function () {
        //举例1全选checkedAllBtn
            var checkedAllBtn=document.getElementById("checkedAllBtn");
            checkedAllBtn.onclick=function () {
                 var items=document.getElementsByName("items");
                  for (var i=0;i<items.length;i++){
                      items[i].checked=true;//设置四个按钮选中状态
                  }//遍历items//通过多选框checked属性可以获取或设置多选狂的选中状态
            };
            //举例2 全 不 选
            var checkedNoBtn=document.getElementById("checkedNoBtn");
            checkedNoBtn.onclick=function () {
                var items=document.getElementsByName("items");
                for (var i=0 ;i<items.length;i++){
                    items[i].checked=false;
                }
                //举例3反 选 如果是true 改成falue
                var checkedRevBtn=document.getElementById("checkedRevBtn");
                checkedRevBtn.onclick=function () {
                var items=document.getElementsByName("items");
                for(var i=0;i<items.length;i++){
                   // if (items[i].checked){//items[i].checked==true没必要这样写 因为items[i].checked本身就是一个布尔值
                   //     items[i].checked=false;
                   // } else{
                   //     items[i].checked=true;
                   // }第一种方法
                    items[i].checked=!items[i].checked; //第二种方法  取反
                }
                };
            };
            //举例4 提交 点击按钮之后将所有选中的对话框的value属性值弹出
            var sendBtn=document.getElementById("sendBtn");
            sendBtn.onclick=function () {
                var items=document.getElementsByName("items");
                for(var i=0;i<items.length;i++){
                    //判断多选框是否被选中
                   if(items[i].checked){
                       alert(items[i].value);//如果items[i].checked值为true 则弹出value的值
                   }
                }
            };
            //举例5 checkedAllBox 全选/全不选  当它选中时，其余的也选中，当它取消时其他也取消
            //this的第五种用法，在事件的响应函数中，响应函数是给谁绑定的 this就是谁
            var checkedAllBox=document.getElementById("checkedAllBox");
            var items=document.getElementsByName("items");
            checkedAllBox.onclick=function () {
                // alert(this===checkedAllBox);//返回true 所以这里的this就是checkedAllBox
                for(var i=0;i<items.length;i++){

                    items[i].checked=this.checked;
                }
            }
            //举例6items 如果四个多选框全部选中，则checkedAllBox也应该被选中
           //如果四个多选框没都被选中，则checkedAllBox也不应该被选中
        //为四个多选框绑定单击函数
         };
    </script>
</head>
<body>

<form method="post" action="">
    你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选

    <br />
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
    <input type="checkbox" name="items" value="乒乓球" />乒乓球
    <br />
    <input type="button" id="checkedAllBtn" value="全　选" />
    <input type="button" id="checkedNoBtn" value="全不选" />
    <input type="button" id="checkedRevBtn" value="反　选" />
    <input type="button" id="sendBtn" value="提　交" />
</form>
</body>
</html>